<template>
	<view>
		<u-popup :show="cartBottom" :customStyle="{'bottom':'180rpx'}" border-radius="30" mode="bottom"
			closeable='closeable' @close="close">
			<view class="cartListBox">
				<view class="title">
					<text>已添加项目</text>
					<view class="empty">
						<u-icon label="清空" name="trash-fill" size="18"></u-icon>

					</view>
				</view>
				<u-cell-group>
					<u-cell v-for="(item, index) in cartItems" :key="index" :title="item.title"
						:title-style="{color:'#000000','font-size':'32rpx'}">
						<u-image :width="'60rpx'" :height="'60rpx'" slot="icon" :src="item.image"></u-image>
						<view class="c_r_text" slot="right-icon">
							<view class="price">{{ item.weightRange }}</view>
							<view class="delBtn" @click="removeItem(index)">删除</view>
						</view>
					</u-cell>
				</u-cell-group>
				<!-- <u-gap height="60" bg-color="#f5f5f5"></u-gap> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			cartBottom: Boolean,
			cartItems: Array,
		},
		data() {
			return {
				closeable: true,
				// cartBottom:true
			};
		},
		onLoad() {
			// alert(this.cartBottom)
		},
		methods: {
			close() {
				this.$emit('close');
			},
			clearCart() {
				this.$emit('clearCart');
			},
			removeItem(index) {
				this.$emit('removeItem', index);
			},
			submitOrder() {
				// Handle order submission
			},
		},
	};
</script>

<style lang="scss" scoped>
 @import '../FormCompontent.css';
</style>